<template>
  <div class="login">
    <El-tabs type="border-card" class="demo-tabs">
      <El-tab-pane label="登录">
        <form class="form">
          <div class="account">
            <label for="login-account">用户名：</label>
            <input
              type="text"
              id="login-account"
              v-model="loginForm.account"
              autocomplete="on"
            />
          </div>
          <div class="password">
            <label for="account-password">密码: </label>
            <input
              type="password"
              id="account-password"
              v-model="loginForm.password"
              autocomplete="on"
            />
          </div>
          <div class="login_btn">
            <button @click.prevent="handleLogin" class="btn">登录</button>
          </div>
        </form>
      </El-tab-pane>
      <El-tab-pane label="注册">
        <form class="form">
          <div class="account">
            <label for="register-account">用户名：</label>
            <input
              type="text"
              id="register-account"
              v-model="registerForm.account"
              autocomplete="on"
            />
          </div>
          <div class="password">
            <label for="register-password">密码：</label>
            <input
              type="password"
              id="register-password"
              v-model="registerForm.password"
              autocomplete="on"
            />
          </div>
          <div class="password">
            <label for="register-password2">确认密码：</label>
            <input
              type="password"
              id="register-password2"
              v-model="registerForm.password2"
              autocomplete="on"
            />
          </div>
          <div class="login_btn">
            <button @click.prevent="handleRegister" class="btn">注册</button>
          </div>
        </form>
      </El-tab-pane>
    </El-tabs>
    <Modal :open="show" @close="closeModal" :msg="message" />
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import axios from "axios";
import Modal from "@/components/Modal/index.vue";
import { useLocalStorage } from "@/hooks/useLocalStorage.js";
export default {
  components: {
    Modal,
  },
  setup() {
    // 显示弹出框
    let show = ref(false);
    const closeModal = () => {
      show.value = false;
    };
    let message = ref("你好");
    const loginForm = reactive({
      account: "123456",
      password: "123456",
    });
    const handleLogin = async () => {
      //47.93.31.63
      const { data } = await axios.post("http://47.93.31.63:9000/user/login", {
        account: loginForm.account,
        password: loginForm.password,
      });
      if (data.token) {
        message.value = "登录成功";
        useLocalStorage("token", data.token);
        useLocalStorage("account", data.account);
        show.value = true;
      }
    };

    const registerForm = reactive({
      account: "123456",
      password: "123456",
      password2: "123456",
    });
    const handleRegister = async () => {
      if (registerForm.password !== registerForm.password2) {
        show.value = true;
        message.value = "两次密码不一致";
      }
      // 47.93.31.63
      const { data } = await axios.post("http://47.93.31.63:9000/user", {
        account: registerForm.account,
        password: registerForm.password,
      });
      if (data._id) {
        message.value = `用户${data.account}注册成功`;
        show.value = true;
      }
    };

    return {
      loginForm,
      handleLogin,
      registerForm,
      handleRegister,
      show,
      message,
      closeModal,
    };
  },
};
</script>

<style>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: calc(100vh - 100px);
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  width: 600px;
  height: 600px;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}

.el-tabs__item {
  height: 100px;
  font-size: 40px;
  line-height: 100px;
}
label {
  display: block;
  margin-bottom: 10px;
}
input {
  outline-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 13px 14px;
  width: 500px;
  margin-bottom: 20px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Microsoft soft";
}
.login_btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  display: block;
  width: 270px; /* 宽度 */
  height: 70px; /* 高度 */
  border-width: 0px; /* 边框宽度 */
  border-radius: 3px; /* 边框半径 */
  background: #1e90ff; /* 背景颜色 */
  cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
  outline: none; /* 不显示轮廓线 */
  font-family: Microsoft YaHei; /* 设置字体 */
  color: white; /* 字体颜色 */
  font-size: 50px; /* 字体大小 */
  border-radius: 40px;
}

.btn:hover {
  /* 鼠标移入按钮范围时改变颜色 */
  background: #5599ff;
}
</style>